<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit:cover" />
  <title>详情</title>
  <link rel="stylesheet" href="../css/show.css">
</head>

<body>
  <div class="show">
    <div class="header">
      <div class="left">
        <img src="../images/list/230h61.png" alt="">
      </div>
      <div class="title">产品详情</div>
      <div class="right">
        <img src="../images/list/170h61.png" alt="">
      </div>
    </div>
    <div class="bigimg">
      <img src="../images/show/cap_02.jpg" />
    </div>
    <div class="text">
      <div class="left">
        <div class="showname">鲨鱼经典帽子</div>
        <div class="price">
          <p class="pic">价格：</p>
          <p class="picnum">￥100.0</p>
        </div>
        <div class="color">
          <p class="colorname">颜色：</p>
          <p class="white">白色</p>
          <p class="black">黑色</p>
        </div>
        <div class="specification">
          <p class="colorname">规格：</p>
          <p class="white">L 码</p>
          <p class="black">M 码</p>
        </div>
      </div>
      <div class="right">
        <div class="collect">
          <img src="../images/show/collect_03.png" alt="">
          <p>收藏</p>
        </div>
        <div class="like">
          <img src="../images/show/like_03.png" alt="">
          <p>分享</p>
        </div>
      </div>
    </div>
    <div class="particulars">
      <p class="particulars_title">商品详情</p>
      <p class="particulars_text">鲨鱼经典帽子介绍</p>
      <p class="images">
        <img class="top" src="../images/show/longcap_03.png" alt="">
        <img class="bottom" src="../images/show/myopiacap_03.png" alt="">
      </p>
    </div>
    <div class="button">
      <div class="buy">
        <img src="../images/show/shop_03.png" alt="">
      </div>
      <div class="bths">
        <div class="num">1</div>
        <div class="left">加入购物车</div>
        <div class="right">立即购买</div>
      </div>
    </div>
  </div>
</body>

</html>

<script type="text/javascript">
  function adapter () {
    //获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
    const dpWidth = document.documentElement.clientWidth
    //计算根字体大小
    const rootFonstSize = (dpWidth * 100) / 750
    //设置根字体大小
    document.documentElement.style.fontSize = rootFonstSize + 'px'
  }
  adapter()
  window.onresize = adapter
</script>